<template>
  <div>
    <ul>
      <li v-for="p in persons" :key="p.id">
        <!-- query to字符串写法 -->
        <router-link :to="`/home/news/newsDetail?id=${p.id}&name=${p.name}`">
                    {{ p.id }}
        </router-link>
        <!-- query to对象写法 -->
        <!-- <router-link :to="{
                    path:'/home/news/newsDetail',
                    query:{
                        id:p.id,
                        name:p.name
                    }
                }"> -->
        <!-- query to字符串写法 -->
        <!-- <router-link :to="`/home/news/newsDetail/${p.id}/${p.name}`">
                    {{ p.id }}
        </router-link> -->
        <!-- parmas to对象写法 -->
        <!-- <router-link
          :to="{
            name: 'NewsDetail',
            parmas: {
              id: p.id,
              name: p.name,
            },
          }"
        >
          {{ p.id }}
        </router-link> -->
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Message",
  data() {
    return {
      persons: [
        {
          id: "001",
          name: "张三",
        },
        {
          id: "002",
          name: "李四",
        },
        {
          id: "003",
          name: "王五",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
</style>